<template>
	<u-popup :show="show" mode="center" bgColor="transparent" @close="$emit('change',false)">
		<view class="flex flex-js-end mb-16">
			<w-icon name="close" size="24" @click="$emit('change',false)"></w-icon>
		</view>
		<view class="popCon">
			<view class="title">
				<!-- <image :src="$ossUrl + '/static/cj/19.png'"></image> -->
				<text>{{handleLang('惊喜连连 再试一次')}}</text>
				<!-- <image :src="$ossUrl + '/static/cj/20.png'"></image> -->
			</view>
			<view class="cp_info">
				<block v-for="(item,idx) in prize" :key="idx">
					<image :src="$ossUrl+item.image" mode="widthFix"></image>
				</block>
			</view>
			<view class="btn">
				<!-- <image :src="$ossUrl+`/static/cj/${num==1?'btn9':'btn8'}.png`" mode="widthFix" @click="$emit('confim')"></image> -->
				<!-- <w-button @click="$emit('confim')" shape="circle" style="width: 326rpx;border-radius: 64rpx;">再抽{{ num == 1?'一':'五' }}次</w-button> -->
				<w-button @click="$emit('confim')" shape="circle" style="width: 326rpx;border-radius: 64rpx;">确认</w-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default: false
			},
			num:{
				type:Number | String,
				default: 1
			},
			// 奖品
			prize:{
				type:Array,
				default:[]
			}
		},
		model:{
			prop:'show',
			event:'change'
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.popCon{
		width: 600rpx;
		background-color: #ffffff;
		background-image: url($IMG_URL + '/static/cj/popup-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		border-radius: 32rpx;
		padding: 40rpx;
		position: relative;
		z-index: 99;
		
		>.title{
			width: 100%;
			@extend .flex-center;
			>text{
				font-size: 32rpx;
				color: #B3B3B3;
				font-weight: bold;
				margin: 0 32rpx;
			}
			>image{ width: 46rpx;height: 12rpx; }
		}
		>.cp_info{
			width: 100%;
			padding: 100rpx 60rpx;
			@extend .flex-center,.flex-w;
			>image{
				width: 160rpx;
				height: 188rpx;
				display: block;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
			}
		}
		>.btn{
			width: 100%;
			position: absolute;
			left: 0rpx;
			bottom: 20rpx;
			@extend .flex-center;
			
			>image{
				width: 380rpx;
				height: 116rpx;
				display: block;
			}
		}
	}
</style>
